<template>
  <div ref="echartId" :data="timeChart"></div>
</template>
<script>
export default {
  props: {
    timeChart: {
      type: Object,
      default: () => {}
    },
    echartId: {
      type: String,
      default: 'pieEbarChartschart'
    },
    times: Boolean
  },

  data () {
    return {}
  },

  watch: {
    timeChart: {
      handler () {
        this.time()
      }
    }
  },

  methods: {
    time () {
      const _this = this
      const num = this.timeChart.num
      const timeChart = this.$echarts.init(this.$refs.echartId)
      const option1 = {
        title: {
          text: this.timeChart.title,
          left: 'left',
          subtextStyle: {
            color: 'rgba(44,53,66,0.45)',
            fontSize: 15
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          top: '13%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          itemWidth: 16, // 设置宽度
          itemHeight: 16, // 设置高度
          top: 0,
          data: this.timeChart.ldata,
          left: 'center',
          textStyle: {
            fontSize: 14,
            color: '#666666',
            fontWeight: 400
          }
        },
        xAxis: [
          {
            type: 'category',
            data: this.timeChart.xdata,
            axisPointer: {
              type: 'shadow'
            },
            // 文字样式
            axisLabel: {
              show: true,
              textStyle: {
                color: 'rgba(44,53,66,0.45)'
              },
              // interval:0,
              rotate: this.timeChart.rotate ? this.timeChart.rotate : 0,
              formatter: function (value) {
                console.log(typeof value)
                if (_this.times) {
                  return value
                }
                if (!_this.times) {
                  let newParamsName = ''
                  const paramsNameNumber = value.length
                  const provideNumber = num
                  const rowNumber = Math.ceil(paramsNameNumber / provideNumber)
                  if (paramsNameNumber > provideNumber) {
                    for (let p = 0; p < rowNumber; p++) {
                      let tempStr = ''
                      const start = p * provideNumber
                      const end = start + provideNumber
                      if (p === rowNumber - 1) {
                        tempStr = value.substring(start, paramsNameNumber)
                      } else {
                        tempStr = value.substring(start, end) + '\n'
                      }
                      newParamsName += tempStr // 最终拼成的字符串
                    }
                  } else {
                    newParamsName = value
                  }
                  return newParamsName
                }
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            // data: this.timeChart.xdata,
            name: this.timeChart.yname,
            splitLine: {
              show: true,
              lineStyle: {
                color: 'rgba(65,97,128,0.15)',
                width: 1,
                type: 'solid'
              }
            }
          }
        ],
        series: this.timeChart.series
        //     [
        //   {
        //     name: this.timeChart.sname3,
        //     type: "bar",
        //     barWidth: "25%",
        //     data: this.timeChart.sdata3,
        //     itemStyle: {
        //       color: '#fffffff',
        //       barBorderRadius: [6,6,6,6],
        //     },
        //   },
        // ],
      }
      timeChart.setOption(option1)
      window.addEventListener('resize', function () {
        timeChart.resize()
      })
    }
  },

  mounted () {
    this.$nextTick(() => {
      this.time()
    })
  }
}
</script>
<style lang="less">
//#time {
//  width: 100%;
//}
</style>
